<template>
  <div id="box">
    <el-table :data="tableData" border fit stripe>
      <el-table-column v-for="item in tableHead" :key="item.id" :label="item.label" :prop="item.title" align="center"
        :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{ scope.row[item.title] }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableHead: [{
            id: 1,
            label: '可用性指标',
            title: 'operation'
          },
          {
            id: 2,
            label: '指标数据来源',
            title: 'ip'
          },
          {
            id: 5,
            label: '问题定位',
            title: 'createDate'
          },
          {
            id: 3,
            label: '修复建议',
            title: 'userName'
          }
        ],
        tableData: [{
            operation: '域名可用',
            ip: '拨测',
            createDate: '直接定位',
            userName: '基于数据库'
          },
          {
            operation: '网站可达',
            ip: '拨测',
            createDate: '直接定位',
            userName: '基于数据库'
          },
          {
            operation: 'API可达',
            ip: '拨测',
            createDate: '直接定位',
            userName: '基于数据库'
          },
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>
  #box {
    padding: 30px;
  }
</style>
